<template>
    <div>
        <h2>基本设置</h2>
        <Form ref="form" :model="data" :rules="rules" label-position="top" class="ivu-mt">
            <Row type="flex" :gutter="48">
                <Col v-bind="grid1">
                    <FormItem label="头像" prop="avatar">
                        <Avatar :src="data.avatar" class="setting-account-info-avatar" shape="square" />
                        <Upload action="//jsonplaceholder.typicode.com/posts/" class="ivu-mt ivu-mb">
                            <Button icon="md-camera">修改头像</Button>
                        </Upload>
                    </FormItem>
                </Col>
                <Col v-bind="grid2">
                    <FormItem label="姓名" prop="name">
                        <Input v-model="data.name" placeholder="请输入昵称" />
                    </FormItem>
                    <FormItem label="手机号" prop="phone">
                        <Input v-model="data.phone" placeholder="请输入邮箱" />
                    </FormItem>
                    <FormItem label="性别" prop="gender">
                        <RadioGroup v-model="radioGroup">
                            <Radio label="男"></Radio>
                            <Radio label="女"></Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="所属项目" prop="company">
                        <Input v-model="data.company" disabled placeholder="请输入项目" />
                    </FormItem>
                    <FormItem label="岗位" prop="post">
                        <Input v-model="data.post" disabled placeholder="请输入岗位" />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit">更新基本信息</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            radio: '',
            grid1: {
                xl: {
                    span: 12,
                    order: 2
                },
                lg: {
                    span: 24,
                    order: 1
                },
                md: {
                    span: 24,
                    order: 1
                },
                sm: {
                    span: 24,
                    order: 1
                },
                xs: {
                    span: 24,
                    order: 1
                }
            },
            grid2: {
                xl: {
                    span: 12,
                    order: 1
                },
                lg: {
                    span: 24,
                    order: 2
                },
                md: {
                    span: 24,
                    order: 2
                },
                sm: {
                    span: 24,
                    order: 2
                },
                xs: {
                    span: 24,
                    order: 2
                }
            },
            data: {
                avatar:
                    'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                name: '代用名',
                phone: '13384998898',
                genter: '男',
                company: '合肥华研',
                post: '医助'
            },
            rules: {
                name: [
                    { required: true, message: '请输入昵称', trigger: 'blur' }
                ],
                mail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        required: true,
                        type: 'email',
                        message: '请输入正确的邮箱',
                        trigger: 'blur'
                    }
                ],
                desc: [
                    {
                        required: true,
                        message: '请输入个人介绍',
                        trigger: 'blur'
                    }
                ],
                company: [
                    { required: true, message: '请输入公司', trigger: 'blur' }
                ],
                city: [
                    {
                        required: true,
                        message: '请选择居住地',
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    methods: {
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$Message.success('信息更新成功!')
                }
            })
        }
    }
}
</script>
<style lang="less">
.setting-account-info {
    &-avatar {
        width: 90px;
        height: 90px;
    }
}
</style>
